<template>
  <div class="movie" ref="movie">
    <div class="movie-container" ref="movie-container">
      <div class="banner">
        <scroll-banner></scroll-banner>
      </div>
      <div class="movie-item">
        <div class="title">
          <div class="left">正在热映</div>
          <div class="right">全部(23)></div>
        </div>
        <div class="content" ref="scroll2">
          <div class="item-wrapper" ref="item-wrapper0">
            <div class="item" @click="$router.push('/index')">
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
          </div>
        </div>

      </div>
      <div class="movie-item">
        <div class="title">
          <div class="left">正在热映</div>
          <div class="right">全部(23)></div>
        </div>
        <div class="content" ref="scroll1">
          <div class="item-wrapper" ref="item-wrapper1">
            <div class="item" @click="$router.push('/index')">
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
            <div class="item" >
              <div class="img-box">
                <img src="../../../../static/test2.jpg" alt="" width="100%">
                <span class="score">9.9</span>
              </div>
              <p class="name">吊吊吊</p>
              <p class="text">叼的不行</p>
            </div>
          </div>
        </div>

      </div>
      <div class="news">
        <div class="title">
          <div class="left">热门资讯</div>
          <div class="right">更多></div>
        </div>
        <div class="content">
          <div class="row border-1px" @click="$router.push('/index')">
            <div class="left">
              <div class="top">万万没想到，这才是孩子的《起跑线》</div>
              <div class="bottom">04-23 996热度</div>
            </div>
            <div class="right">
              <img src="../../../../static/test2.jpg" alt="" style="width: 100%;height: 76px">
            </div>
          </div>
          <div class="row border-1px">
            <div class="left">
              <div class="top">万万没想到，这才是孩子的《起跑线》</div>
              <div class="bottom">04-23 996热度</div>
            </div>
            <div class="right">
              <img src="../../../../static/test2.jpg" alt="" style="width: 100%;height: 76px">
            </div>
          </div>
          <div class="row border-1px">
            <div class="left">
              <div class="top">万万没想到，这才是孩子的《起跑线》</div>
              <div class="bottom">04-23 996热度</div>
            </div>
            <div class="right">
              <img src="../../../../static/test2.jpg" alt="" style="width: 100%;height: 76px">
            </div>
          </div>
          <div class="row border-1px">
            <div class="left">
              <div class="top">万万没想到，这才是孩子的《起跑线》</div>
              <div class="bottom">04-23 996热度</div>
            </div>
            <div class="right">
              <img src="../../../../static/test2.jpg" alt="" style="width: 100%;height: 76px">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import scrollBanner from '../../../components/scrollBanner/scrollBanner'
    export default {
        name: "movie",
        created() {
        },
        mounted() {
          //单页面设置better-scroll

          //获取视口宽度
          let clientWidth = document.body.clientWidth
          let itemWidth = clientWidth/4
          for(let i = 0;i<document.getElementsByClassName("item").length;i++){
            document.getElementsByClassName("item")[i].style.width = itemWidth + 'px'
          }
          //定义item父级元素宽度，宽度为item.length*item.width+10*(item.length-1)
          this.$refs['item-wrapper0'].style.width = (itemWidth*9+80) + 'px'
          this.$refs['item-wrapper1'].style.width = (itemWidth*9+80) + 'px'
          this.$nextTick(()=>{
            if(!this.scroll){
              let scroll = new BScroll(this.$refs.movie,{
                click:true,
              })
              let scroll1 = new BScroll(this.$refs.scroll1,{
                scrollX:true,
                eventPassthrough:'vertical'
              })
              let scroll2 = new BScroll(this.$refs.scroll2,{
                scrollX:true,
                eventPassthrough:'vertical'
              })
            }else {
              this.scroll.refresh();
            }
          })
        },
        components:{
          'scroll-banner':scrollBanner
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .movie
    height 100%
    overflow hidden
    .movie-item
      padding 0 15px
      .title
        display flex
        height 17px
        margin-top 29px
        margin-bottom 18px
        line-height 17px
        .left,.right
          flex 1
        .left
          text-align left
          color #ffffff
          font-size 16px
        .right
          text-align right
          color #C4C4C4
          font-size 12px
      .content
        width 100%
        text-align left
        overflow hidden
        white-space nowrap
        font-size 0
        overflow-scrolling:touch
        .item
          display inline-block
          padding-right  10px
          border-radius 3px
          .img-box
            border-radius 3px
            overflow hidden
            position relative
            .score
              line-height 16px
              display block
              height 14px
              width 20px
              background #EEAC21
              position absolute
              bottom 0
              right 0
              color #161719
              text-align center
              font-size 10px
              border-radius 3px

          &:last-child
            padding-right 0
          .name
            padding-top 10px
            font-size 14px
            color #ffffff
          .text
            padding-top 5px
            font-size 10px
            color #C4C4C4
    .news
      padding 0 15px
      .title
        display flex
        height 17px
        margin-top 29px
        margin-bottom 18px
        line-height 17px
        .left,.right
          flex 1
        .left
          text-align left
          color #ffffff
          font-size 16px
        .right
          text-align right
          color #C4C4C4
          font-size 12px

      .content
        color #2b81af
        .row
          display flex
          padding 18px 0
          border-1px (#343434)
          &:last-child
            border-1px(#101011)
          .left
            flex 1
            text-align left
            .top
              height 42px
              color #ffffff
              line-height 21px
              font-size 14px
            .bottom
              font-size 12px
              color #999999
              height 12px
              line-height 12px
              padding-top 18px
          .right
            flex 0 0 35%
            text-align right
            padding-left 16px
</style>
